import * as d3 from 'd3';
import {draw, pieInner, pieTop, pieOuter} from './renderUtils';

/**
 * 生成3d饼图
 * @param {*} id ：id唯一标识
 * @param {*} width ：svg的宽
 * @param {*} height ：svg的高
 * @param {*} data ：要渲染的数据
 * @param {*} x ：横向偏移量
 * @param {*} y ：纵向偏移量
 * @param {*} rx ：饼图的横向半径
 * @param {*} ry ：饼图的纵向半径
 * @param {*} h ：饼图的高度
 */
export default function pie(id, width, height, data, x, y, rx, ry, h, config,ir=0) {
    d3.select(id).selectAll('svg').remove();
    //创建一个svg容器，用来存放饼图
    const pieSvg = d3
        .select(id)
        .append('svg')
        .attr('width','100%')
        .attr('height','100%');
    pieSvg.append('g').attr('id','pie_chart');
    //生成饼图数据
    const dataset = d3
        .pie()
        .sort(null)
        .value((d) => {
            return d.value
        })(data);
    // 获取上面插入的g
    const slices = d3
        .select('#pie_chart')
        .append('g')
        .attr('transform','translate(350,200)')
        .attr('class','slices')
        .style('cursor','pointer');
    //生成环形内曲面
    slices
        .selectAll('.innerSlice')
        .data(dataset)
        .enter()
        .append('path')
        .attr('class','innerSlice')
        .style('fill',(d,index) => {
            let colorIndex = index % config.color.length
            return d3.hsl(config.color[colorIndex]).darker(0.7)
        })
        .attr('d',d => {
            return pieInner(d, rx+0.5, ry+0.5, h, ir)
        });
    //上层2D平面
    slices.selectAll('.topSlice')
        .data(dataset)
        .enter()
        .append('path')
        .transition()
        .delay(0)
        .duration(500)
        .attrTween('d',(d) => {
            //动画效果
            let interpolate = d3.interpolate(d.startAngle, d.endAngle);
            return function(t){
                d.endAngle = interpolate(t);
                return pieTop(d, rx, ry, ir)
            }
        })
        .attr('class','topSlice')
        .style('fill',(d,index) => {
            let colorIndex = index % config.color.length
            return config.color[colorIndex]
        })
        .style('stroke',(d,index) => {
            let colorIndex = index % config.color.length
            return config.color[colorIndex]
        })
        //侧面曲面
        slices.selectAll('.outerSlice')
            .data(dataset)
            .enter()
            .append('path')
            .transition()
            .delay(0)
            .duration(500)
            .attrTween('d',(d) => {
                //动画效果
                let interpolate = d3.interpolate(d.startAngle, d.endAngle);
                return function(t){
                    d.endAngle = interpolate(t);
                    return pieOuter(d, rx- 0.5, ry - 0.5, h)
                }
            })
            .attr('class','outerSlice')
            .style('fill',(d,index) => {
                let colorIndex = index % config.color.length
                return d3.hsl(config.color[colorIndex]).darker(0.7)
            });
        //是否显示标签
        if(config.sfShowLabel){
            //创建文本标签引导线
            const line = d3.select('#pie_chart')
                .append('g')
                .attr('transform',`translate(350,200)`)
                .attr('class','line');
            //引导线
            line.selectAll('.line')
                .data(dataset)
                .enter()
                .append('line')
                .attr('stroke',(d,index) => {
                    let colorIndex = index % config.color.length
                    return config.color[colorIndex]
                })
                .attr('x1',0)
                .attr('y1',0)
                .attr('x2',d => {
                    return 1.5 * rx * Math.cos(0.5 * (d.startAngle + d.endAngle))
                })
                .attr('y2',d => {
                    return 1.5 * ry * Math.sin(0.5 * (d.startAngle + d.endAngle))
                })
                .style('visibility', d => {
                    return 'visible'
                });
            //文本
            const textbox = d3.select('#pie_chart')
                .append('g')
                .attr('transform','translate(350,200)')
                .attr('class','textbox');
            const text = textbox.selectAll('desc')
                .data(dataset)
                .enter()
                .append('text')
                .attr('font-size','14px')
                .attr('text-anchor','middle')
                .style('visibility', d => {
                    return 'visible'
                })
                .attr('fill',(d,index) => {
                    let colorIndex = index % config.color.length
                    return config.color[colorIndex]
                })
                .text(d => {
                    return `${d.data.label}:${d.data.value}${d.data.DWMC}`
                })
                .attr('transform', d => {
                    let x = 1.5 * (rx + 10) * Math.cos(0.5 * (d.startAngle + d.endAngle))
                    let y = 1.5 * (ry + 10) * Math.sin(0.5 * (d.startAngle + d.endAngle))
                    return `translate(${x},${y})`
                })
        }
        //是否显示图例
        if(config.sfLegend){
            //此处为了实现横向和纵向图例的效果，必须在外层盒子中创建薪的svg来包裹图例盒子
            const legendSvg = d3.select(id)
                .append('svg')
                .style('position','absolute');
            let legend = null //每一个图例
            let legendBox = null //图例层最外层大盒子
            //判断是否横向图例
            if(config.legendOrient === 'horizontal'){
                //横向
                legendBox = legendSvg.attr('width',700)
                    .attr('height',20)
                    .style('top',() => {
                        return 400 - 30
                    })
                    .style('left',7)
                    .append('g')
                    .attr('id','legend_svg')
                legend = legendBox.selectAll('g')
                    .data(data)
                    .enter()
                    .append('g');
            }else{
                //纵向
                console.log('纵向')
            }
            //创建图例前的小圆点样式
            let legendItembox = legend.append('circle')
                .attr('cx',10)
                .attr('cy',10)
                .attr('r',7);

            legendItembox.attr('fill',(d,index) => {
                let colorIndex = index % config.color.length
                return config.color[colorIndex]
            });
            //图例旁边的文字
            legend.append('text')
                .text(d => {
                    return d.label
                })
                .style('font-size','14px')
                .attr('fill','#000000')
                .attr('y',11)
                .attr('x',30)
                .attr('dy',3);
            //处理横向图例的翻页还是普通
            if(config.legendOrient === 'horizontal'){
                //判断是普通图例还是翻页图例
                if(config.legendType === 'scroll'){
                    legendSvg.attr('width',700 - 80);
                    //计算每一个图例的距离
                    let list = []
                    let left = 0
                    legend.each(function(){
                        left += d3.select(this).node().getBBox().width + 10
                        list.push(left)
                    })
                    legend.attr('transform',function(d, i){
                        if(i === 0){
                            return 'translate(0,0)'
                        }else {
                            return `translate(${list[i - 1]},0)`
                        }
                    })
                    //图例宽度大于盒子宽度
                    if(legendSvg.node().getBBox().width > (700 - 80)){
                        //获取总页数
                        let legendNumLength = 0
                        let totalPage = 1 //总页数
                        let curPage = 1 //翻页定义当前页数
                        let transitionX = 0 //需要移动图例整体所占的距离
                        let lineList = [] //如果是普通图例判断一行显示多少个
                        legend.each(function(d,i){
                            legendNumLength += d3.select(this).node().getBBox().width + 10
                            if(legendNumLength > (700 - 80 - (d3.select(this).node().getBBox().width + 10))){
                                legendNumLength = 0
                                //避免移动到最后一页多加一夜
                                if(data.length - 1 !== i){
                                    lineList.push(i)
                                    totalPage++
                                }
                            }
                        })
                        //定义横向翻页的svg
                        const legendPageSvg = d3.select(id)
                            .append('svg')
                            .attr('width',100)
                            .attr('height',20)
                            .style('position','absolute')
                            .style('top',400 - 30)
                            .style('left',700 - 80);
                        let sym = d3.symbol().type(d3.symbolTriangle).size(100);

                        const pageBox = legendPageSvg.append('g')
                            .attr('id','legend_page')
                            .attr('transform','translate(15,8)');

                            //定义左侧翻页符号
                        pageBox.append('path')
                            .attr('d',sym)
                            .attr('fill','green')
                            .attr('transform','rotate(30)')
                            .style('cursor','pointer')
                            .on('click',function(){
                                if(curPage > 1){
                                    let legendNumLength = 0
                                    let curLength = 0
                                    legend.each(function(d,i){
                                        legendNumLength += d3.select(this).node().getBBox().width + 10
                                        if(legendNumLength <= 700 - 80){
                                            curLength = legendNumLength
                                        }
                                    })
                                    transitionX -= curLength
                                    legendBox.transition()
                                        .duration(500)
                                        .attr('transform',`translate(-${transitionX}, 0)`);
                                    curPage--
                                    legendText.text(`${curPage}/${totalPage}`)
                                }
                            });
                        //页码
                        const legendText = pageBox.append('text')
                            .text(`${curPage}/${totalPage}`)
                            .attr('fill','red')
                            .attr('font-size',12)
                            .attr('transform','translate(10,5)');
                        //右侧翻页按钮
                        pageBox.append('path')
                            .attr('d',sym)
                            .attr('fill','green')
                            .attr('transform','translate(40,0) rotate(-30)')
                            .style('cursor','pointer')
                            .on('click',function(){
                                if(curPage < totalPage){
                                    let legendNumLength = 0
                                    let curLength = 0
                                    legend.each(function(d,i){
                                        legendNumLength += d3.select(this).node().getBBox().width + 10
                                        if(legendNumLength <= 700 - 80){
                                            curLength = legendNumLength
                                        }
                                    });
                                    transitionX += curLength
                                    legendBox.transition()
                                        .duration(500)
                                        .attr('transform',`translate(-${transitionX}, 0)`);
                                    curPage++
                                    legendText.text(`${curPage}/${totalPage}`)
                                }
                            });
                    }
                }
                else{
                    //类型是普通图例
                    legendSvg.attr('width',700 - 20);
                    //获取总页数
                    let legendNumLength = 0
                    let totalPage = 1 //总页数
                    let lineList = [] //如果是普通图例判断一行显示多少个
                    legend.each(function(d,i) {
                        legendNumLength += d3.select(this).node().getBBox().width + 10
                        if(legendNumLength > (700 - 20 - (d3.select(this).node().getBBox().width + 10))){
                            legendNumLength = 0
                            //避免移动到最后一页多加一夜
                            if(data.length - 1 !== i){
                                lineList.push(i)
                                totalPage++
                            }
                        }
                    })
                    let maxWidth = 0 //获取最大的图例宽度
                    legend.each(function() {
                        if(maxWidth < d3.select(this).node().getBBox().width){
                            maxWidth = d3.select(this).node().getBBox().width
                        }
                    });
                    legendSvg.attr('height',20*totalPage)
                        .style('top',450 - 30 - 20*(totalPage - 1));
                    let listX = [] //各个图例横向的X
                    let listY = [] //图例纵向的Y
                    let left = 0
                    let top = 0
                    legend.each(function(d,i) {
                        left += d3.select(this).node().getBBox().width + 10
                        lineList.forEach(item => {
                            if(item === i){
                                left = 0
                                top += 20
                            }
                        })
                        listX.push(left)
                        listY.push(top)
                    });
                    legend.attr('transform',(d,i) => {
                        if(i === 0){
                            return 'translate(0,0)'
                        }else{
                            return `translate(${listX[i - 1]},${listY[i - 1]})`
                        }
                    })
                }
            }

        }
    // // 创建tooltip提示框
    // let tooltip = d3
    //     .select('body')
    //     .append('div')
    //     .attr('class', 'tooltip-box');
    // d3.select(id)
    //     .selectAll('svg')
    //     .remove();
    //
    // const svg = d3
    //     .select(id)
    //     .append('svg')
    //     .style('background-color','#eeeeee')
    //     .attr('width', width)
    //     .attr('height', height);
    //
    // let gId = id.replaceAll('#', '');
    //
    // svg.append('g').attr('id', gId + 'pie');
    // // 生成饼图数据
    // const dataset = d3
    //     .pie()
    //     .sort(null)
    //     .value(function(d) {
    //         if(d.show){
    //             return d.value;
    //         }
    //     })(data);
    // // 获取svg
    // const slices = d3
    //     .select(`#${gId}pie`)
    //     .append('g')
    //     .attr('transform', `translate(${x},${y})`)
    //     .attr('class', 'slices')
    //     .style('cursor','pointer');
    // // 环形内曲面
    // slices
    //     .selectAll('.innerSlice')
    //     .data(dataset)
    //     .enter()
    //     .append('path')
    //     .attr('class', 'innerSlice')
    //     .style('fill', function(d) {
    //         return d3.hsl(d.data.color).darker(0.7);
    //     })
    //     .attr('d', function(d) {
    //         return pieInner(d, rx + 0.5, ry + 0.5, h, ir);
    //     });
    //     // .each(function(d) {
    //     //     this._current = d;
    //     // });
    // // 上层2d平面
    // slices
    //     .selectAll('.topSlice')
    //     .data(dataset)
    //     .enter()
    //     .append('path')
    //     // .on('mouseover',function(d){
    //     //     console.log(d,'==ddd')
    //     //     tooltip
    //     //         .html(d3.select(this).data()[0].data.label)
    //     //         .style('left', d.clientX + 20 + 'px')
    //     //         .style('top', d.clientY + 20 + 'px')
    //     //         .transition()
    //     //         .duration(500)
    //     //         .style('opacity', 1.0);
    //     // })
    //     .transition()
    //     .delay(0)
    //     .duration(500)
    //     //.each(d3.easeBounceInOut)
    //     .attrTween('d', function(d, i) {
    //         //动画效果
    //         let interpolate = d3.interpolate(d.startAngle, d.endAngle);
    //         return function(t) {
    //             d.endAngle = interpolate(t);
    //             return pieTop(d, rx, ry, ir);
    //         }
    //     })
    //     .attr('class', 'topSlice')
    //     .style('fill', function(d) {
    //         return d.data.color;
    //     })
    //     .style('stroke', function(d) {
    //         return d.data.color;
    //     });
    //     // .attr('d', function(d) {
    //     //     return pieTop(d, rx, ry, ir);
    //     // });
    //     // .each(function(d) {
    //     //     this._current = d;
    //     // });
    //
    //
    // // 侧面曲面
    // slices
    //     .selectAll('.outerSlice')
    //     .data(dataset)
    //     .enter()
    //     .append('path')
    //     .transition()
    //     .delay(0)
    //     .duration(500)
    //     //.each(d3.easeBounceInOut)
    //     .attrTween('d', function(d, i) {
    //         //动画效果
    //         let interpolate = d3.interpolate(d.startAngle, d.endAngle);
    //         return function(t) {
    //             d.endAngle = interpolate(t);
    //
    //             return pieOuter(d, rx - 0.5, ry - 0.5, h);
    //         }
    //     })
    //     .attr('class', 'outerSlice')
    //     .style('fill', function(d) {
    //         return d3.hsl(d.data.color).darker(0.7);
    //     })
    //     // .attr('d', function(d) {
    //     //     return pieOuter(d, rx - 0.5, ry - 0.5, h);
    //     // })
    //     .each(function(d) {
    //         this._current = d;
    //     });
    // //线条
    // const line = d3
    //     .select(`#${gId}pie`)
    //     .append('g')
    //     .attr('transform', `translate(${x},${y})`)
    //     .attr('class', 'line');
    //
    // line
    //     .selectAll('.line')
    //     .data(dataset)
    //     .enter()
    //     .append('line')
    //     .attr('stroke',d => d.data.color)
    //     .attr('x1',0)
    //     .attr('y1', 0)
    //     .attr('x2', function(d) {
    //         // console.log( 1 * rx * Math.cos(0.5 * (d.startAngle + d.endAngle)),111)
    //         return 1.5 * rx * Math.cos(0.5 * (d.startAngle + d.endAngle));
    //     })
    //     .attr('y2', function(d) {
    //         // console.log(1 * ry * Math.sin(0.5 * (d.startAngle + d.endAngle)),222)
    //         return 1.5* ry * Math.sin(0.5 * (d.startAngle + d.endAngle));
    //     });
    // // 文本
    // const textbox = d3
    //     .select(`#${gId}pie`)
    //     .append('g')
    //     .attr('transform', `translate(${x},${y})`)
    //     .attr('class', 'textbox');
    // textbox
    //     .selectAll('desc')
    //     .data(dataset)
    //     .enter()
    //     .append('text')
    //     .attr('font-weight',900)
    //     .attr('fill','#cccccc')
    //     // .attr('stroke','#000000')
    //     .attr('stroke-width','0.5px')
    //     .attr('transform',d => {
    //         let x = 1.6 * rx * Math.cos(0.5 * (d.startAngle + d.endAngle));
    //         let y = 1.6 * ry * Math.sin(0.5 * (d.startAngle + d.endAngle));
    //         return 'translate(' + x + ',' + y + ')';
    //     })
    //     .attr('font-size','12px')
    //     .attr('text-anchor','middle')
    //     .text(d => d.data.label);
    //
    // // let colorScale = d3
    // // .scaleOrdinal()
    // // .domain(d3.range(0, data.length))
    // // .range(d3.schemeSet1);
    // /**
    //  * @Author: zhangjinhao
    //  * @Date: 2023/4/12 11:49
    //  * @Describe: 添加图例
    //  */
    // if (config.sfLegend) {
    //     //如果显示图例
    //     let legend = null
    //     if(config.legendOrient === 'horizontal'){
    //         //图例布局  横向
    //         legend = svg
    //             .append("g")
    //             // .attr("transform", "translate( " + 10 * 2.5 + ", 0 )")
    //             .attr('transform',`translate(${10*2.5},${height - 30})`)
    //             .selectAll("g")
    //             .data(data)
    //             .enter()
    //             .append("g");
    //     }else if(config.legendOrient === 'vertical'){
    //         //图例布局 纵向
    //         legend = svg
    //             .append("g")
    //             .attr("transform", "translate( " + 10 * 2.5 + ", 0 )")
    //             .selectAll("g")
    //             .data(data)
    //             .enter()
    //             .append("g")
    //             .attr("transform", function (d, i) {
    //                 return "translate(0," + (i * 20 + 20) + ")";
    //             });
    //     }
    //     //修改图例样式
    //     let legendIcon = null
    //     if(config.legendIcon === 'circle'){
    //         //图例圆形
    //         legendIcon = legend
    //             .append('circle')
    //             .attr('cx',10)
    //             .attr('cy',10)
    //             .attr('r',9);
    //     }else if(config.legendIcon === 'rect'){
    //         //图例矩形
    //         legendIcon = legend
    //             .append('rect')
    //             .attr("width", 27)
    //             .attr("height", 18);
    //     }
    //     legendIcon.attr("fill", function (d) {
    //             if(d.show){
    //                 if (config.sfLegendStyle) {
    //                     return config.legendItemStyleColor
    //                 } else {
    //                     return d.color;
    //                 }
    //             }else{
    //                 return '#CCCCCC'
    //             }
    //         })
    //         .on('mouseover',function(){
    //             console.log(d3.select(this),'==this')
    //             //鼠标滑过图例显示小手
    //             d3.select(this).style('cursor','pointer')
    //         })
    //         .on('click',function(d,i){
    //             data.forEach(item => {
    //                 if(item.label === i.label){
    //                     item.show = !item.show
    //                 }
    //             })
    //             pie(id, width, height, data, x, y, rx, ry, h, config,ir=0)
    //         });
    //     legend
    //         .append("text")
    //         .text(function (d) {
    //             return d.label;
    //         })
    //         .style('font-family',config.legendFontFamily)
    //         .style("font-size", config.legendTextStyleFontSize)
    //         .attr('fill',config.legendTextStyleColor)
    //         .attr("y", 10)
    //         .attr("x", 30)
    //         .attr("dy", 3);
    //     if(config.legendOrient === 'horizontal'){
    //         let list = []
    //         let left = 0
    //         legend.each(function (){
    //             left += d3.select(this).node().getBBox().width + 10
    //             list.push(left)
    //         });
    //         legend.attr('transform',function(d,i){
    //             if(i === 0){
    //                 return "translate(0,0)"
    //             }else{
    //                 return `translate(${list[i-1]},0)`
    //             }
    //         });
    //     }
    // }
    // //生成标题
    // if(config.sfTitle){
    //     const title = svg.append('g')
    //         .attr("transform", "translate( " + 10 * 2.5 + ", 30 )");
    //     title.append('text')
    //         .text(function(){
    //             return '3D饼图'
    //         })
    //         .attr('fill',config.titleColor)
    //         .style('font-weight',config.sfTitleBold)
    //         .style("font-size",config.titleFontSize+'px')
    //         .style('font-style',config.sfTitleItalic);
    //     title.insert('rect','text')
    //         .attr("y",function (){
    //             return -title.node().getBBox().height - 5
    //         })
    //         .attr("x",-10)
    //         .attr('width',function(){
    //             return 50
    //             // return title.node().getBBox().width + 20
    //         })
    //         .attr('height',function(){
    //             return title.node().getBBox().height + 20
    //         })
    //         .attr('fill',config.titleBGColor?config.titleBGColor:'transparent')
    //         .style('stroke-width',config.titleStrokeWidth)
    //         .style('stroke',config.titleStroke);
    // }
    // //提示框
    // if(config.sfTooltip){
    //
    //     slices
    //         .on('mouseover',function(d){
    //             tooltip
    //                 .html(d.target.__data__.data.label)
    //                 .style('left', d.clientX + 20 + 'px')
    //                 .style('top', d.clientY + 20 + 'px')
    //                 .transition()
    //                 .duration(500)
    //                 .style('opacity', 1.0);
    //         })
    //     //鼠标滑过
    //     slices.on('mouseout',() => {
    //         tooltip.transition().style('opacity', 0);
    //     })
    // }else{
    //     d3.select('body')
    //         .selectAll('.tooltip-box')
    //         .remove()
    // }
}
